<template>
	<!-- <canvas id="qr" type="2d" style="height: 750rpx; width: 750rpx"></canvas> -->
	<!-- <canvas style="width: 300px; height: 200px" canvas-id="qrCanvas" id="qrCanvas"></canvas> -->
	<canvas type="2d" style="width: 260px; height: 260px;position: fixed;left:100%"  id="myQrcode"></canvas>
</template>
<script>
import drawQrcode from '@/untils/weapp.qrcode.esm.js';
export default {
	props: {
		qrLink: { default: '' } // 生成二维码链接
	},
	watch:{
		qrLink(curr){
			if(curr){
				console.log('*************')
				this.generateQRCode();
			}
		}
	},
	data() {
		return {};
	},
	methods: {
		generateQRCode() {
			let that = this;
			if (!that.qrLink) return;
			const query = uni.createSelectorQuery().in(that);
			query
				.select('#myQrcode')
				.fields({ node: true, size: true })
				.exec((res) => {
					let canvas = res[0].node;
					// 调用方法drawQrcode生成二维码
					drawQrcode({
						canvas: canvas,
						canvasId: 'myQrcode',
						width: 260,
						padding: 20,
						background: '#ffffff',
						foreground: '#000000',
						text: that.qrLink
					});
					// 获取临时路径
					uni.canvasToTempFilePath({
						x: 0,
						y: 0,
						width: 260,
						height: 260,
						destHeight: 260,
						destWidth: 260,
						canvasId: 'myQrcode',
						canvas: canvas,
						success(res) {
							that.$emit('saveQrLink', res.tempFilePath);
						}
					});
				});
		}
	},
	onReady() {
		this.generateQRCode();
	}
};
</script>
<style lang="scss" scoped></style>
